<template>
  <view class="page">
    <view class="line align-center justify-between" v-for="(item, index) in list" :key="index">
      <view class="align-center" @click="$to('/pages/communityUser/index?id=' + item.id)">
        <image class="avatarImg" :src="item.avatar" />
        <view class="userInfo">
          <view class="name" v-html="item.nickname"></view>
          <view class="text" v-html="introduce"></view>
        </view>
      </view>

      <view class="btn1" v-if="item.isAtten == 1" @click="attention(item.id)"> 关注 </view>
      <view class="btn2" v-if="item.isAtten == 2" @click="unfollow(item.id)"> 已关注 </view>
    </view>

    <view v-if="list.length == 0" class="noneData"></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      introduce: '快来分享生活中的美好',
      constants: {},
      page: 1,
      total: 0
    }
  },
  onLoad() {
    this.getData()
  },
  onReachBottom(e) {
    if (this.list.length < this.total) {
      this.page++
      this.getData(true)
    }
  },
  methods: {
    getData(type) {
      if (!type) {
        this.list = []
      }
      var that = this
      this.$http({
        url: 'getUserList',
        method: 'post',
        data: {
          page: this.page
        }
      }).then(res => {
        this.total = res.data.total
        that.list = res.data.data
      })
    },
    attention(id) {
      this.$http({
        url: 'attention',
        data: { b_user_id: id },
        method: 'GET'
      }).then(res => {
        this.getData()
      })
    },
    unfollow(id) {
      this.$http({
        url: 'attention2',
        data: { b_user_id: id },
        method: 'GET'
      }).then(res => {
        this.getData()
      })
    }
  }
}
</script>
<style lang="css" scoped>
.align-center {
  display: flex;
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.page {
  background-color: rgba(248, 248, 248, 1);
  overflow: scroll;
  height: 100vh;
  box-sizing: border-box;
  width: 100%;
}
.name {
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
}
.text {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
.line {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
  height: 180rpx;
  margin-top: 20rpx;
  justify-content: flex-center;
  padding: 30rpx 30rpx 30rpx 30rpx;
}

.avatarImg {
  width: 120rpx;
  height: 120rpx;
}

.userInfo {
  margin: 8rpx 0 18rpx 24rpx;
}
.btn1 {
  width: 60px;
  height: 30px;
  background: linear-gradient(331deg, #fe373c 0%, #fe7837 100%);
  box-shadow: 0px 2px 6px 0px rgba(255, 136, 139, 0.5);
  border-radius: 15px;

  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  line-height: 30px;
  text-align: center;
}
.btn2 {
  width: 60px;
  height: 30px;
  background: #f8f8f8;
  border-radius: 15px;

  font-weight: 500;
  font-size: 14px;
  color: #999999;
  line-height: 30px;
  text-align: center;
}
</style>
